{{#if template}}
<template>
  <a-card>
    <!-- 搜索栏 -->
    <search-form :loading="loading" @search="toQuery" :downloadLoading="downloadLoading" @download="toExport" multi-rows v-slot="{ advanced }">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="{{label}}" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-input v-decorator="['PQ_{{prop}}_LIKE']" placeholder="请输入{{label}}" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-if="advanced" :gutter="16">
        <a-col :span="8">
          <a-form-item label="{{label}}" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-input v-decorator="['PQ_{{prop}}_LIKE']" placeholder="请输入{{label}}" />
          </a-form-item>
        </a-col>
      </a-row>
    </search-form>
    <!-- table操作 -->
    <div class="table-operations">
      <a-button v-permission="{ meta: $route.meta, permissionCode: 'ADD' }" type="primary" icon="plus" @click="onAdd">新建</a-button>
    </div>
    <!-- table -->
    <a-table bordered size="middle" :loading="loading" :columns="columns" :rowKey="(record) => record.id"
      :dataSource="data" @change="handleTableChange" :pagination="pagination">
      <!-- table-row-operatiin -->
      <template v-slot:operation="record">
        <div class="table-row-operations">
          <a v-permission="{ meta: $route.meta, permissionCode: 'UPDATE' }" href="javascript:;"
            @click="onEdit(record)">修改 </a>
          <a-popconfirm v-permission="{ meta: $route.meta, permissionCode: 'DELETE' }" title="Sure to delete?"
            @confirm="() => onDelete(record)">
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </div>
      </template>
    </a-table>
    <!-- form 编辑 查看 -->
    <{{ name }}-form ref="form" :is-add="isAdd" @refreshTable="init" />
  </a-card>
</template>
{{/if}}

{{#if script}}
<script>
  const columns = [
    {
      title: '{{label}}',
      dataIndex: '{{prop}}',
      sorter: true
    },
    {
      title: '操作',
      key: 'operation',
      scopedSlots: { customRender: 'operation' }
    }
  ]

  import initData from '@/mixins/initData'
  import permission from '@/directive/permission' // 权限判断指令
  import SearchForm from '@/components/tool/SearchForm'
  import {{properCase name}}Form from './form'
  import { get, del } from '@/api/{{name}}'

  export default {
    name: '{{ properCase name }}',
    components: {
      SearchForm,
      {{properCase name}}Form
  },
  directives: { permission },
  mixins: [initData],
    data() {
    return {
      columns
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  computed: { },
  methods: {
    beforeInit() {
      // ajax query
      this.url = '{{ module }}/{{ name }}/page'
      this.params = { current: this.pagination.current, size: this.pagination.pageSize, sort: this.sort, ...this.query }
      return true
    },
    onAdd() {
      this.isAdd = true
      const _this = this.$refs['form']
      _this.visible = true
    },
    async onEdit(record) {
      let res = await get(record.id)
      this.isAdd = false
      const _this = this.$refs['form']
      _this.form = { ...res.data }
      _this.visible = true
    },
    async onDelete(record) {
      const key = 'del{{ properCase name }}'
      try {
        this.$message.loading({ content: '正在删除...', key })
        let res = await del(record.id)
        this.$message.success({ content: '删除成功!', key, duration: 2 })
        this.init()
      } catch (err) {
        this.$message.error({ content: '删除失败', key })
        console.error(err.message)
      }
    }
  }
  }
</script>
{{/if}}

{{#if style}}
<style lang="less" scoped>

</style>
{{/if}}
